<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3-class&style</title>
    <script src="../vue3.js"></script>
</head>
<body>
<div id="box">
    {{10 + 20}}
    {{msg}}
    <label>
        <input type="text" v-model="text">
    </label>
    <button @click="handleAdd()">add</button>
    {{text}}


    <div :class="classObj">动态切换class-对象</div>

</div>
<script>
    //Vue2
    // new Vue({
    //     el: '#box'
    //     data:{
    //         msg: '洪连最帅'
    //     }
    // })

    //Vue3
    let obj = {
        //data函数式写法
        data() {
            return {
                msg: '洪连最帅',
                text: '',
                classObj: {
                    aa: true,
                    bb: true,
                    cc: false,
                }
            }
        },
        methods: {
            handleAdd() {
                console.log("add", this.text)
                this.classObj.dd = true
            }
        }
    }
    Vue.createApp(obj).mount("#box")
</script>
</body>
</html>